import React from 'react';
// 引入验证码组件
import Captcha from '@/components/Captcha';
import { Button, Form, Input, Space, message } from 'antd';
// 引入图标组件
import { LockOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons';
// 引入状态hook
import { useState, useRef } from 'react';
// 导入两个两个hook 用来操作redux 
import { useDispatch } from 'react-redux';
// 导入接口请求
import { verifyCaptcha, sendSms } from '@/api/login'
// 短信登录
const Sms = () => {
    // 验证码组件所需数据
    let [key, setKey] = useState('')
    let [time, setTime] = useState(10) // 验证码倒计时初始值
    let timer = null  // 定时器
    // 创建dispatch方法
    let dispatch = useDispatch()
    // 创建ref对象
    let ref1 = useRef()
    // 获取form表单实例
    let [form] = Form.useForm() //antd form表单提供的方法
    // 验证码组件所需函数
    let savekey = (key) => {
        setKey(key)
    }
    // 发送验证码函数
    let sendSmsFn = () => {
        // 1.发送验证码之前需先验证手机号、图形验证码是否填写
        form.validateFields(['mobile', 'captcha']).then(res => {
            // 验证通过，校验图形验证码是否正确
            verifyCaptcha({
                key,
                captcha: res.captcha
            }).then(res1 => {
                if (res1.data.errno == 0) {
                    // 图形验证码验证成功，发送验证码
                    /*  sendSms({
                         token: res1.data.context.token,
                         mobile: res.mobile,
                         type: 0
                     }).then(res2 => {
 
                     }) */
                    // 验证码发送成功，就需要开启倒计时
                    timer = setInterval(() => {
                        time--
                        if (time == 0) {
                            time = 10
                            clearInterval(timer)
                        }
                        setTime(time)
                    }, 1000)
                } else {
                    // 图形验证码验证失败
                    message.error(res1.data.errText, 1, () => {
                        console.log(res1);
                        console.log(ref1);
                        //ref1.current.loadashFn();
                        form.setFieldsValue({
                            mobile: '',
                            captcha: ''
                        })
                    })
                }
            })
        }).catch(err => {
            // 表示验证失败
            console.log('验证失败', err);
        })
    }
    // 登录验证成功执行的
    let onFinish = (values) => {
        // 调用短信登录接口，成功后跳转首页
    }
    // 登录验证失败执行的
    let onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    }
    return (
        <div>
            <Form
                name="basic"
                wrapperCol={{
                    span: 24,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                size='large'
                form={form}
            >
                <Form.Item
                    name="mobile"
                    rules={[
                        {
                            required: true,
                            message: '请输入手机号!',
                        },
                    ]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="手机号" />
                </Form.Item>
                <Space>
                    <Form.Item
                        name="captcha"
                        rules={[
                            {
                                required: true,
                                message: '请输入图形验证码!',
                            },
                        ]}
                    >
                        <Input prefix={<KeyOutlined className="site-form-item-icon" />} placeholder="图形验证码" />
                    </Form.Item>
                    <Form.Item>
                        {/* 验证码组件 */}
                        <Captcha h={38} savekey={savekey} ref={ref1}></Captcha>
                    </Form.Item>
                </Space>
                <Space>
                    <Form.Item
                        name="code"
                        rules={[
                            {
                                required: true,
                                message: '请输入短信验证码!',
                            },
                        ]}
                    >

                        <Input prefix={<LockOutlined className="site-form-item-icon" />} placeholder="短信验证码" />
                    </Form.Item>
                    <Form.Item>
                        {/* 发送验证码按钮 */}
                        <Button disabled={time != 10} onClick={sendSmsFn}>{time != 10 ? `倒计时${time}秒` : '发送验证码'}</Button>
                    </Form.Item>
                </Space>
                <Form.Item
                    wrapperCol={{
                        span: 24,
                    }}
                >
                    <Button type="primary" htmlType="submit" block>
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

export default Sms;
